import React, { Component } from 'react'
import Header from '../common/Header'
import { connect } from 'react-redux';
import { add_address_action } from '../../store/store';
import { Toast } from 'antd-mobile'

class Add extends Component {
    constructor() {
        super();
        this.state = {
            name: '',//联系人
            phone: '',//电话
            address:''//地址
        }
    }
    render() {
        return (
            <div className="add-page">
                {/* Header组件 */}
                <Header title="新增地址" back={<span onClick={() => { this.props.history.go(-1); }}>&lt;</span>}></Header>
                

                {/* 表单 */}
                <div className="cell">
                    <div>联系人</div>
                    <div><input type="text" placeholder="姓名" value={this.state.name} onChange={(e)=>{ this.setState({ name: e.target.value  }) }}/></div>
                </div>
                <div className="cell">
                    <div>电话</div>
                    <div><input type="text" placeholder="电话" value={this.state.phone} onChange={(e) => { this.setState({ phone: e.target.value }) }}/></div>
                </div>
                <div className="cell">
                    <div>地址</div>
                    <div><input type="text" placeholder="地址" value={this.state.address} onChange={(e) => { this.setState({ address: e.target.value }) }}/></div>
                </div>

                {/* 保存 按钮 */}
                <div className="btn-box">
                    <div className="btn" onClick={() => { 
                        if (this.state.name && this.state.phone && this.state.address)
                        {
                            this.props.add_address(this.state);
                            Toast.success("新增地址成功!", 1, null, false);
                            setTimeout(() => {
                                this.props.history.push('/addresslist');
                            },1000)
                        }
                        else
                            Toast.fail("姓名/电话/地址不能为空!",1,null,false);
                     }} >保存地址</div>
                </div>
            </div>
        )
    }
}

export default connect(
    (state) => {//注入数据
        return {
            
        }
    },
    (dispatch) => {//注入方法
        return {
            add_address: (item) => {
                dispatch( add_address_action( item ) )
            }
        }
    }
)( Add )
